// ==UserScript==
// @name         字幕搜索下载预览 (Vue + Element UI)
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  使用 Vue 和 Element UI 优化 UI 的下载字幕脚本，增加预览功能
// @author       qingtian1
// @include      *
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bbs.tampermonkey.net.cn
// @require      https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js
// @require      https://unpkg.com/element-ui@2.14.1/lib/index.js
// @require      https://cdn.jsdelivr.net/npm/jschardet@3.0.0/dist/jschardet.min.js
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @connect      api-shoulei-ssl.xunlei.com
// @connect      subtitle.v.geilijiasu.com
// ==/UserScript==

(function() {
  'use strict'

  // 防止在 iframe 中重复运行代码
  if (window.self !== window.top) {
    console.log('当前页面不是主窗口，无法运行脚本')
    return // 如果当前不是主窗口，直接退出
  }

  // 动态插入 Element UI 样式
  const elementStyle = document.createElement('link')
  elementStyle.rel = 'stylesheet'
  elementStyle.href = 'https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css'
  document.head.appendChild(elementStyle)

  // 动态插入自定义样式
  const customStyle = document.createElement('style')
  customStyle.type = 'text/css'
  customStyle.innerHTML = `
    .myVueCard {
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      height: 100vh;
      width: 70vw;
      background-color: rgba(255, 255, 255, 0.9);
      transition: all 0.5s;
      box-shadow: 2px 3px 3px 0 rgba(0, 0, 0, 0.1);
    }
    .card__btn {
      transition: all 0.5s;
      border-radius: 30px 0 0 30px;
      width: 30px;
      height: 60px;
      background-color: rgb(178, 94, 239);
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
    }
    .card__btn svg {
      height: 20px;
      width: 20px;
      position: absolute;
      right: 5px;
      top: 20px;
      transition: all 0.5s;
    }
    .card--hide {
      left: -70vw;
    }
    .card--hide .card__btn {
      border-radius: 0 30px 30px 0;
      right: -30px;
    }
    .card--hide .card__btn svg {
      transform: rotate(180deg);
    }
    .el-message-box__wrapper {
      z-index: 10001 !important; 
    }
  `
  document.head.appendChild(customStyle)

  // 创建 Vue 挂载点
  const appContainer = document.createElement('div')
  appContainer.id = 'subtitleApp'
  document.body.appendChild(appContainer)

  // Vue 实例
  new Vue({
    el: '#subtitleApp',
    data() {
      return {
        isHide: false, // 是否隐藏侧边栏
        keyword: '', // 搜索关键字
        subtitleList: [], // 字幕列表
        loading: false, // 加载状态
        showTable: false, // 是否显示表格
        showPreview: false, // 是否显示预览对话框
        previewContent: '', // 预览的字幕内容
        previewLoading: false, // 预览加载状态
        isInputFocused: false, // 输入框是否聚焦
        isSearchFocused: false, // 输入框是否聚焦
        search: ''
      }
    },
    mounted() {
      // 添加全局事件监听器，监听输入框的 ESC 键
      document.addEventListener('keydown', this.handleKeydown)
      const subtitleDownloadDefaultIsHide = GM_getValue('subtitleDownloadDefaultIsHide')
      if (subtitleDownloadDefaultIsHide !== null && subtitleDownloadDefaultIsHide !== undefined) {
        this.isHide = subtitleDownloadDefaultIsHide
      }
      document.addEventListener('selectionchange', () => {
        const selectedText = window.getSelection().toString() // 实时获取选中的文本
        if (selectedText && selectedText.trim() !== '' && !this.isInputFocused) {
          // console.log('当前选中的文本:', selectedText)
          this.keyword = selectedText
        }
      })
    },
    methods: {
      customSort({ column, prop, order }) {
        let sortIndex = 1
        if (order === 'descending') {
          sortIndex = -1
        }
        if (['分钟', '时间'].includes(column['label'])) {
          prop = 'duration'
          this.subtitleList.sort((pre, next) => {
            const preValue = pre[prop]
            if (this.isBlank(preValue)) {
              return 1
            }
            const nextValue = next[prop]
            if (this.isBlank(nextValue)) {
              return -1
            }
            const diff = preValue - nextValue
            return sortIndex * diff
          })
        } else if (['name'].includes(prop)) {
          this.subtitleList.sort((pre, next) => {
            const preValue = pre[prop]
            if (this.isBlank(preValue)) {
              return 1
            }
            const nextValue = next[prop]
            if (this.isBlank(nextValue)) {
              return -1
            }
            const strDiff = preValue.localeCompare(nextValue)
            return sortIndex * strDiff
          })
        } else {
          console.log('not fond sort function')
        }
      },
      isBlank(value) {
        if (value === undefined ||
      value === '' ||
      value === null ||
      (value instanceof Array && value.length === 0) ||
      (value instanceof Object && Object.keys(value).length === 0)
        ) {
          return true
        }
        return false
      },
      // 切换侧边栏显示状态
      toggleSidebar() {
        this.isHide = !this.isHide
        GM_setValue('subtitleDownloadDefaultIsHide', this.isHide)
      },
      // 监听键盘按键
      handleKeydown(event) {
        // console.log('isInputFocused', this.isInputFocused)
        if (event.keyCode === 27 && this.isInputFocused) {
          this.keyword = ''
          this.whenInputClear()
        } else if (event.keyCode === 27 && this.isSearchFocused) {
          this.search = ''
        }
      },
      whenInputClear() {
        this.showTable = false
        this.subtitleList.length = 0
      },
      whenInputChange(value) {
        if (value.trim() === '') {
          this.showTable = false
          this.subtitleList.length = 0
        }
      },
      // 搜索字幕
      async searchSubtitles() {
        if (!this.keyword.trim()) {
          this.$message.error('请输入关键字')
          return
        }
        this.loading = true
        this.subtitleList = []
        const list = await this.requestToXunlei(this.keyword.trim())
        if (list.length === 0) {
          this.$message.warning('未找到相关字幕')
        } else {
          this.subtitleList = list
          this.showTable = true
        }
        this.loading = false
      },
      // 请求迅雷 API
      requestToXunlei(keyword) {
        return new Promise((resolve) => {
          GM_xmlhttpRequest({
            method: 'GET',
            url: `https://api-shoulei-ssl.xunlei.com/oracle/subtitle?name=${keyword}`,
            // responseType: 'blob', // 确保返回的是 Blob 数据
            anonymous: true, // 设置匿名，避免携带 cookies，绕过跨域验证
            headers: {
              'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36', // 模拟 Chrome
              'Cache-Control': 'no-cache', // 请求不要缓存
              'Pragma': 'no-cache', // HTTP 1.0 的缓存控制（备用）
              'Expires': '0', // 设置过期时间为过去时间，强制刷新
              'Referer': 'https://api-shoulei-ssl.xunlei.com/' // 模拟来源页面
            },
            onload: (response) => {
              const res = JSON.parse(response.responseText)
              console.log('res', res)
              if (res.code === 0 && Array.isArray(res.data)) {
                res.data.sort((pre, next) => {
                  const preExt = pre['ext']
                  if (this.isBlank(preExt)) {
                    return 1
                  }
                  const nextExt = next['ext']
                  if (this.isBlank(nextExt)) {
                    return -1
                  }
                  const extDiff = nextExt.localeCompare(preExt)
                  if (extDiff !== 0) {
                    return extDiff
                  }

                  const preDuration = pre['duration']
                  if (this.isBlank(preDuration)) {
                    return 1
                  }
                  const nextDuration = next['duration']
                  if (this.isBlank(nextDuration)) {
                    return -1
                  }
                  return nextDuration - preDuration
                })
                resolve(res.data)
              } else {
                resolve([])
              }
            },
            onerror: () => resolve([])
          })
        })
      },
      // 下载字幕
      downloadSubtitle(row) {
        const endExt = `.${row.ext}`
        this.$prompt('请输入文件名,不包含后缀', '保存字幕', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: row.name.replace(endExt, ''), // 默认文件名
          inputValidator: (value) => {
            return value.trim() !== '' || '文件名不能为空'
          }
        }).then(({ value }) => {
          const filename = value.endsWith(endExt) ? value : `${value}${endExt}` // 自动补充扩展名
          console.log(filename)
          GM_xmlhttpRequest({
            method: 'GET',
            url: row.url,
            responseType: 'blob', // 确保返回的是 Blob 数据
            anonymous: true, // 设置匿名，避免携带 cookies，绕过跨域验证
            headers: {
              'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36', // 模拟 Chrome
              'Cache-Control': 'no-cache', // 请求不要缓存
              'Pragma': 'no-cache', // HTTP 1.0 的缓存控制（备用）
              'Expires': '0', // 设置过期时间为过去时间，强制刷新
              'Referer': 'https://subtitle.v.geilijiasu.com/' // 模拟来源页面
            },
            onload: (response) => {
              const blob = response.response
              const link = document.createElement('a')
              link.href = URL.createObjectURL(blob)
              link.download = filename
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              URL.revokeObjectURL(link.href)

              this.$set(row, 'isDownloaded', true) // Vue 响应式地更新属性
            },
            onerror: () => {
              this.$message.error('下载失败，请重试')
            }
          })
        }).catch(() => {
          this.$message.info('取消保存操作')
        })
      },
      // 将 ArrayBuffer 转换为 Base64
      arrayBufferToBase64(buffer) {
        let binary = ''
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        return 'data:application/octet-stream;base64,' + window.btoa(binary)
      },
      // 预览字幕
      previewSubtitle(row) {
        this.previewLoading = true
        this.showPreview = true
        this.previewContent = '' // 清空之前的预览内容

        GM_xmlhttpRequest({
          method: 'GET',
          url: row.url,
          responseType: 'arraybuffer', // 确保返回的是 Blob 数据
          anonymous: true, // 设置匿名，避免携带 cookies，绕过跨域验证
          headers: {
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36', // 模拟 Chrome
            'Cache-Control': 'no-cache', // 请求不要缓存
            'Pragma': 'no-cache', // HTTP 1.0 的缓存控制（备用）
            'Expires': '0', // 设置过期时间为过去时间，强制刷新
            'Referer': 'https://subtitle.v.geilijiasu.com/' // 模拟来源页面
          },
          onload: (response) => {
            const arrayBuffer = response.response
            const base64String = this.arrayBufferToBase64(arrayBuffer)
            // console.log('Base64 String:', base64String)
            // 解码 Base64 后进行编码检测
            const detected = jschardet.detect(atob(base64String.split(';base64,')[1])) // 从 base64 数据中提取并解码
            console.log('Detected encoding:', detected)
            const encoding = detected.encoding.toLowerCase()
            const blob = new Blob([arrayBuffer])
            // 读取文件内容
            const reader = new FileReader()
            reader.onload = (event) => {
              const textContent = event.target.result
              // console.log('Text content:', textContent)
              this.previewContent = textContent
            }
            reader.readAsText(blob, encoding) // 使用检测到的编码读取文件
            this.previewLoading = false

            this.$set(row, 'isPreview', true) // Vue 响应式地更新属性
          },
          onerror: () => {
            this.$message.error('加载预览失败')
            this.previewLoading = false
          }
        })
      },
      // 转换毫秒为分钟
      convertMillisecondsToMinutes(milliseconds) {
        return Math.floor(milliseconds / 1000 / 60)
      },
      // 格式化时间
      formatMillisecondsToTime(milliseconds) {
        const totalSeconds = Math.floor(milliseconds / 1000)
        const hours = Math.floor(totalSeconds / 3600)
        const minutes = Math.floor((totalSeconds % 3600) / 60)
        const seconds = totalSeconds % 60
        return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
      }
    },
    template: `
      <div class="myVueCard" :class="{ 'card--hide': isHide }">
        <div class="app-container" style="position: relative;top: 50px; left: 50px;">
          <el-form inline @submit.native.prevent>
            <el-form-item label="关键字">
              <el-input
                  v-model="keyword"
                  placeholder="请输入关键字"
                  clearable
                  @clear="whenInputClear"
                  @input="whenInputChange"
                  @keyup.enter.native="searchSubtitles"
                  @focus="isInputFocused = true"
                  @blur="isInputFocused = false"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubtitles" :loading="loading">搜索</el-button>
            </el-form-item>
          </el-form>

          <el-table v-if="showTable" 
                    :data="subtitleList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" 
                    border
                    style="margin-top: 20px;width: 90%"
                    @sort-change="customSort"
                    stripe
                    max-height="650">
            <el-table-column 
                prop="name" 
                label="文件名"
                sortable="custom"
                :sort-orders="['descending','ascending']"
            ></el-table-column>
            <el-table-column 
                label="分钟"
                sortable="custom"
                :sort-orders="['descending','ascending']"
                width="80">
              <template slot-scope="scope">
                {{ convertMillisecondsToMinutes(scope.row.duration) }}
              </template>
            </el-table-column>
            <el-table-column 
                label="时间"
                sortable="custom"
                :sort-orders="['descending','ascending']"
                width="150">
              <template slot-scope="scope">
                {{ formatMillisecondsToTime(scope.row.duration) }}
              </template>
            </el-table-column>
            <el-table-column align="right" width="200">
              <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    @focus="isSearchFocused = true"
                    @blur="isSearchFocused = false"
                    clearable
                    placeholder="输入关键字搜索"/>
              </template>
              
              <template slot-scope="scope">
                <el-button
                    :type="scope.row.isDownloaded ? 'success' : 'primary'"
                    size="mini"
                    @click="downloadSubtitle(scope.row)"
                >
                  {{ scope.row.isDownloaded ? '已下载' : '下载' }}
                </el-button>
                <el-button
                    :type="scope.row.isPreview ? 'info' : 'warning'"
                    size="mini"
                    @click="previewSubtitle(scope.row)"
                >
                  {{ scope.row.isPreview ? '已预览' : '预览' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 预览对话框 -->
          <el-dialog
              title="字幕预览"
              :visible.sync="showPreview"
              width="60%"
              :before-close="() => { showPreview = false }"
          >
            <div v-if="previewLoading" style="text-align: center; padding: 20px;">
              <el-spinner></el-spinner>
              加载中...
            </div>
            <pre v-else style="white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto;">
            {{ previewContent }}
          </pre>
            <span slot="footer" class="dialog-footer">
            <el-button @click="showPreview = false">关闭</el-button>
          </span>
          </el-dialog>
        </div>
        <div class="card__btn" @click="toggleSidebar">
          <svg t="1589962875590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M730.020653 1018.946715l91.277028-89.978692a16.760351 16.760351 0 0 0 5.114661-11.803064 15.343983 15.343983 0 0 0-5.114661-11.803064l-400.123871-393.435467L821.691117 118.254899a17.075099 17.075099 0 0 0 0-23.606129L730.020653 4.670079a17.232473 17.232473 0 0 0-23.999564 0L202.030255 500.08402a16.445603 16.445603 0 0 0-4.721226 11.803064 15.265296 15.265296 0 0 0 5.114661 11.803064l503.597399 495.413941a17.153786 17.153786 0 0 0 23.999564 0z"
                fill="#FFFFFF"
            ></path>
          </svg>
        </div>
      </div>
    `
  })
})()